<template>
  <div class="letter-setting__template">
    <div class="header bg">ID</div>
    <div class="header bg">模板名称</div>
    <div class="header bg" style="justify-content: start;padding-left: 26px;">示咧</div>
    <div class="header bg">发送记录</div>
    <div>1</div>
    <div>奖励通知</div>
    <div>尊敬的张三 您好！恭喜您于消费的订单中产生了店铺奖励，消费时间为，
      单笔奖励金额为。截止目前您累计待领取奖励总额为。特此通知并感谢您
      对傲雪棋专卖店的支持与信任！</div>
    <div>
      <n-switch />
    </div>
    <div class="bg">2</div>
    <div class="bg">生日提醒</div>
    <div class="bg">尊敬的张三，您好！恭喜您于对方的消费的订单中产生了店铺奖励，消费时间
      为，单笔奖励金额为。截止目前您累计待领取奖励总额为。特此通知并感
      谢您对傲雪棋专卖店的持与信任！</div>
    <div class="bg">
      <n-switch />
    </div>
    <div>3</div>
    <div>升级提示</div>
    <div>尊敬的张三，您好！恭喜您于费的订单中产生了店铺奖励，消费时间为，单笔
      奖励金额为。截止目前您累计待领取奖励总额为。特此通知并感谢您对傲
      雪棋专卖店的支持与信任！</div>
    <div>
      <n-switch />
    </div>
  </div>
</template>
<script setup></script>
<style lang="less" scoped>
.letter-setting__template {
  display: grid;
  grid-template-columns: 68px 130px auto 162px;
  grid-template-rows: 73px repeat(3, 180px);
  align-items: center;
  grid-gap: 1px 1px;
  margin: 0 30px;
  border: 1px solid #DDDEE2;

  >div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 1px #DDDEE2;
  }

  .bg {
    background: #F7F7F7;
  }

  .header {
    font-size: 24px;

    color: #2E323D;
  }

  >div:not(.header) {
    font-size: 24px;
    color: #4A5060;
  }

  >div:not(.header):nth-child(4n-1) {
    justify-content: start;
    align-items: flex-start;
    padding: 35px 25px 0;
    box-sizing: border-box;
  }

  >div:not(.header):nth-child(4n) {
    /deep/ .n-switch {
      zoom: 2.55;

      &:focus .n-switch__rail {
        box-shadow: none;
      }

      &.n-switch--active {
        .n-switch__rail {
          background-color: #1ABD69;
        }
      }

      .n-switch__rail {
        background-color: #D8D8D8;
      }
    }
  }


}
</style>